<template>
  <div class="login-container">
    <div class="login">
      <div class="login1">
        <a-form-model
          :model="loginForm"
          v-bind="layout"
          :rules="loginFormRules"
          ref="loginRef"
        >
          <a-form-model-item label="用户名" prop="username">
            <a-input v-model="loginForm.username" />
          </a-form-model-item>
          <a-form-model-item label="密码" prop="password">
            <a-input v-model="loginForm.password" />
          </a-form-model-item>
          <a-form-model-item>
            <div>
              <a-button type="primary" class="loginBtn" @click="login"
                >登录</a-button
              >
              <a-button type="primary" class="reset" @click="reset"
                >重置</a-button
              >
            </div>
          </a-form-model-item>
        </a-form-model>
      </div>
    </div>
  </div>
</template>

<script>
import { loginList } from "@/network/login";
export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        username: "admin",
        password: "123456",
      },
      layout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 15 },
      },
      loginFormRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 5,
            message: "Length should be 3 to 5",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 16,
            message: "Length should be 6 to 16",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    reset() {
      this.loginForm = {};
    },
    login() {
      this.$refs.loginRef.validate((valid) => {
        if (!valid) return;
        const params = {
          username: this.loginForm.username,
          password: this.loginForm.password,
        };
        loginList(params).then((res) => {
          console.log(res);
          if (res.meta.status !== 200) {
            return this.$message.error("登录失败 帐号或密码错误!");
          }
          this.$message.success("登录成功!");
          // 1. 将登录成功之后的 token,保存到客户端的 sessionStorage(会话机制/只在当前页面生效)中 localStorage(持久话机制/关闭页面也不会忘记数据)
          //   1.1 项目中除了登录之外的API接口,必须在登录之后才能访问
          //   1.2 token 只应在当前网站打开期间生效, 所以将 token 保存在 sessionStorage中
          window.sessionStorage.setItem("token", res.data.token);
          // 2. 通过编程式路由导航跳转到后台主页,路由地址是 /home
          this.$router.push("/home");
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>

.login-container {
  height: 100%;
  background-color: rgb(243, 239, 239);
}
.login {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 450px;
  height: 300px;
  transform: translate(-50%, -50%);
  background-color: skyblue;
}
.loginBtn {
  margin-left: 120px;
}
.login1 {
  margin-top: 50px;
}
.reset {
  margin-left: 210px;
}
</style>